﻿@model KL.Store.Web.Models.PageModel
@using KL.Store.Core
@{
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>@Model.Aciklama | @Parameters.WebSiteTitle</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="~/Content/SuperSized/supersized.css" rel="stylesheet" />
    <link href="~/Content/SuperSized/supersized.shutter.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="~/Scripts/SuperSized/jquery.easing.min.js"></script>
    <script type="text/javascript" src="~/Scripts/SuperSized/supersized.3.2.1.min.js"></script>
    <script type="text/javascript" src="~/Scripts/SuperSized/supersized.shutter.min.js"></script>
    <script type="text/javascript">

        jQuery(function ($)
        {

            $.supersized({

                // Functionality
                slideshow: 1, 		// Slideshow on/off
                autoplay: 0, 		// Slideshow starts playing automatically
                start_slide: 1, 		// Start slide (0 is random)
                stop_loop: 0, 		// Pauses slideshow on last slide
                random: 0, 		// Randomize slide order (Ignores start slide)
                slide_interval: 3000, 	// Length between transitions
                transition: 6, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed: 1000, 	// Speed of transition
                new_window: 1, 		// Image links open in new window/tab
                pause_hover: 0, 		// Pause slideshow on hover
                keyboard_nav: 1, 		// Keyboard navigation on/off
                performance: 1, 		// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect: 0, 		// Disables image dragging and right click with Javascript

                // Size & Position						   
                min_width: 0, 		// Min width allowed (in pixels)
                min_height: 0, 		// Min height allowed (in pixels)
                vertical_center: 1, 		// Vertically center background
                horizontal_center: 1, 		// Horizontally center background
                fit_always: 1, 		// Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait: 1, 		// Portrait images will not exceed browser height
                fit_landscape: 1, 		// Landscape images will not exceed browser width

                // Components							
                slide_links: 'blank', // Individual links for each slide (Options: false, 'number', 'name', 'blank')
                thumb_links: 0, 		// Individual thumb links for each slide
                thumbnail_navigation: 0, 		// Thumbnail navigation
                slides: [			// Slideshow Images
                    @{
                        var imgSayac = 1;
                        foreach (var imgLink in Model.ImageList)
                        {
                            <text>{ image: '@(imgLink)' }</text>
                            if (imgSayac < Model.ImageList.Count())
                            {
                                <text>,</text>
                            }
                            imgSayac++;
                        }   
                    }
                ],

                // Theme Options			   
                progress_bar: 1, 		// Timer for each slide							
                mouse_scrub: 1

            });
        });

    </script>
    <style type="text/css">
        ul#demo-block { position: absolute; top: 170px; left: 50px; }
            ul#demo-block li { margin: 0 0 10px 0; padding: 10px; display: inline; float: left; clear: both; color: #aaa; background: url('/Images/SuperSized/bg-black.png'); font: 11px Helvetica, Arial, sans-serif; }
                ul#demo-block li a { color: #eee; font-weight: bold; }
    </style>
</head>
<body>
    <div style="clear: both;">
    </div>
    <a id="prevslide" class="load-item"></a><a id="nextslide" class="load-item"></a>
    <div id="controls-wrapper" class="load-item">
        <div id="controls">
            <ul id="slide-list">
            </ul>
        </div>
    </div>
</body>
</html>
